<template>
  <view class="main-box">
    <view class="img-container">
      <image
        style="height: 510rpx; width: 750rpx"
        model="scaleToFill"
        src="/static/images/bgc_01.png"
      ></image>
    </view>
    <view class="edit-box">
      <view class="my-date">
        <view class="my-date-input">
          <view>{{ valueTime }}</view>
          <view>星期{{ weekArray[new Date(valueTime).getDay()] }}</view>
        </view>
        <view class="my-date-sfelect">
          <view
            style="
              color: #fff;
              display: flex;
              justify-content: flex-end;
              align-items: center;
            "
          >
            <u-image
              width="40rpx"
              height="40rpx"
              src="../../../static/images/user.png"
            ></u-image>
            <text style="margin-right: 20rpx"> {{ userName }}</text>
          </view>
        </view>
      </view>
      <view style="margin: 0 30rpx;">
        <view class="my-uni-form">
          <view>
            <input
              v-model="form.content1"
              class="uni-input"
              placeholder="工作一最多输入120个字"
              placeholder-style="color:#DBDBDB;"
              maxlength="120"
              type="text"
            />
            <textarea
              v-model="form.describe1"
              class="uni-textarea"
              placeholder-style="color:#DBDBDB;"
            />
            <cmpVideo
              :fileList="fileList"
              @changeComponentData="changeComponentData"
            />
          </view>
          <view>
            <input
              v-model="form.content2"
              class="uni-input"
              placeholder="工作二最多输入120个字"
              placeholder-style="color:#DBDBDB;"
              maxlength="120"
              type="text"
            />
            <textarea
              v-model="form.describe2"
              class="uni-textarea"
            />
            <cmpVideo
              :fileList="fileList1"
              @changeComponentData="changeComponent1Data"
            />
          </view>
          <view style="margin-bottom: 140rpx">
            <input
              v-model="form.content3"
              class="uni-input"
              placeholder="工作三最多输入120个字"
              placeholder-style="color:#DBDBDB;"
              maxlength="120"
              type="text"
            />
            <textarea
              v-model="form.describe3"
              class="uni-textarea"
            />
            <cmpVideo
              :fileList="fileList2"
              @changeComponentData="changeComponent2Data"
            />
          </view>
        </view>
        <u-modal :show="show" width="690rpx" :showConfirmButton="false">
          <cmpDialog
            v-if="btnStatus === 2"
            @handleClose="handleClose"
            @submitForm="submitDocumentForm"
            :dialogData="dialogForwardDocumentData"
          />
          <cmpDialog
            v-if="btnStatus === 1"
            @handleClose="handleClose"
            @submitForm="submitOwnForm"
            :dialogData="dialogOwnData"
          />
        </u-modal>
      </view>
      <view class="submit-form">
        <u-button
          @click="submit"
          :customStyle="{
            boxShadow: 'none !important',
            width: '40%',
            borderRadius: '10rpx',
            color: '#FFFFFF',
            border: '1px solid #0C347E',
            background: '#0C347E',
          }"
          >提交</u-button
        >
      </view>
    </view>
  </view>
</template>
<script>
import cmpDialog from '../../components/cmp-dialog.vue'
import cmpVideo from '../../../components/cmp-video.vue'
import {
  getDailyByData,
  setEditDaily,
  setMessageData,
} from '@/service/services.js'
import { mapState } from 'vuex'
import moment from 'moment'
export default {
  data() {
    return {
      viewList: [],
      show: false,
      btnStatus: 1,
      submitStatus: null,
      weekArray: ['日', '一', '二', '三', '四', '五', '六'],
      valueTime: moment(new Date()).format('YYYY-MM-DD'),
      userName: '',
      leaderid: '',
      pupDocumentShow: false,
      selectUserObj: {},
      pupOwnShow: false,
      value: '',
      value1: moment(new Date()).format('YYYY-MM-DD'),
      dialogOwnData: {
        title: '是否对修改内容进行提交？',
        btn: {
          ok: '提交',
          close: '暂不',
        },
      },
      dialogOwnData: {
        title: '是否对编辑内容进行提交？',
        btn: {
          ok: '提交',
          close: '暂不',
        },
      },
      dialogForwardDocumentData: {
        title: '是否将文件转发给领导？',
        btn: {
          ok: '转发',
          close: '暂不',
        },
      },
      fileList: [],
      fileList1: [],
      fileList2: [],
      form: {
        name: '',
      },
      value: '',
      writeDailyData: {
        title: '写日报',
        info: '填报当日日报',
        count: 200,
      },
      editDailyData: {
        title: '改日报',
        info: '修改文书提交日报',
        count: 4,
      },
    }
  },
  onLoad(option) {
    this.userName = option.userName
    getDailyByData({
      id: option.id,
      leaderid: option.leaderid,
      createDate: moment(new Date()).format('YYYY-MM-DD'),
    }).then((res) => {
      if (res.data) {
        this.leaderid = option.leaderid
        this.submitStatus = res.data.status
        this.form = {
          id: res.data.id,
          clerkid: res.data.clerkid,
          content1: res.data.content1,
          content2: res.data.content2,
          content3: res.data.content3,
          describe1: res.data.describe1,
          describe2: res.data.describe2,
          describe3: res.data.describe3,
        }
        if (res.data.file1) {
          if (res.data.file1.indexOf(';', 1) === 1) {
            if (res.data.file1.indexOf('mp4') === -1) {
              this.fileList = [
                {
                  key: Math.random(),
                  fileType: 'png',
                  fileUrl: res.data.file1,
                },
              ]
            } else {
              this.fileList = [
                {
                  key: Math.random(),
                  fileType: 'mp4',
                  fileUrl: res.data.file1,
                },
              ]
            }
          } else {
            const strArr = res.data.file1
              .substring(0, res.data.file1.lastIndexOf(';'))
              .split(';')
            strArr.forEach((info, index) => {
              this.fileList.push({
                key: Math.random(),
                fileType: info.indexOf('mp4') === -1 ? 'png' : 'mp4',
                fileUrl: info,
              })
            })
          }
        }
        if (res.data.file2) {
          if (res.data.file2.indexOf(';', 1) === 1) {
            if (res.data.file2.indexOf('mp4') === -1) {
              this.fileList1 = [
                {
                  key: Math.random(),
                  fileType: 'png',
                  fileUrl: res.data.file2,
                },
              ]
            } else {
              this.fileList1 = [
                {
                  key: Math.random(),
                  fileType: 'mp4',
                  fileUrl: res.data.file2,
                },
              ]
            }
          } else {
            const strArr = res.data.file2
              .substring(0, res.data.file2.lastIndexOf(';'))
              .split(';')
            strArr.forEach((info, index) => {
              this.fileList1.push({
                key: Math.random(),
                fileType: info.indexOf('mp4') === -1 ? 'png' : 'mp4',
                fileUrl: info,
              })
            })
          }
        }
        if (res.data.file3) {
          if (res.data.file3.indexOf(';', 1) === 1) {
            if (res.data.file3.indexOf('mp4') === -1) {
              this.fileList2 = [
                {
                  key: Math.random(),
                  fileType: 'png',
                  fileUrl: res.data.file3,
                },
              ]
            } else {
              this.fileList2 = [
                {
                  key: Math.random(),
                  fileType: 'mp4',
                  fileUrl: res.data.file3,
                },
              ]
            }
          } else {
            const strArr = res.data.file3
              .substring(0, res.data.file3.lastIndexOf(';'))
              .split(';')
            strArr.forEach((info, index) => {
              this.fileList2.push({
                key: Math.random(),
                fileType: info.indexOf('mp4') === -1 ? 'png' : 'mp4',
                fileUrl: info,
              })
            })
          }
        }
      } else {
        this.submitStatus = true
      }
    })
    wx.setVisualEffectOnCapture({
      visualEffect: 'hidden',
    })
  },
  computed: mapState({
    userInfo(item) {
      return item.userInfo
    },
  }),
  methods: {
    deleteEndPunctuation(str){
       for(let i=1;i<str.length;i++){
          let lastIndex=  str.charAt(str.length-i) 
          let flag =  lastIndex.replace(/(.*)(，|。|、|！|；|,|;|!)/g ,"") 
            if(flag){       
            return  str.slice(0,str.length-i+1)   
            }
        }
      },
    submit(){          
         if (!this.form.content1){
                  uni.showToast({
                      title: '工作一内容不能为空',
                      type: 'default',                   
                      icon: 'none',
                      position: 'center',
                      mask: true,
                      duration: 2000,
                 })
                return
         }  
             this.btnStatus = 1
              this.show = true          
    },
    changeComponentData(data) {
      this.fileList = data
    },
    changeComponent1Data(data) {
      this.fileList1 = data
    },
    changeComponent2Data(data) {
      this.fileList2 = data
    },
    changeTimeDate(timeData) {
      return moment(timeData).format('YYYY-MM-DD')
    },
    handleDocumentClose() {
      this.pupDocumentShow = false
    },
    submitDocumentForm() {
      this.form.leaderid = this.leaderid
      this.form.status = 0
      this.form.file1 = ''
      this.form.file2 = ''
      this.form.file3 = ''
      if (this.fileList.length > 0) {
        this.fileList.forEach((item) => {
          this.form.file1 += item.fileUrl + ';'
        })
      }
      if (this.fileList1.length > 0) {
        this.fileList1.forEach((item) => {
          this.form.file2 += item.fileUrl + ';'
        })
      }
      if (this.fileList2.length > 0) {
        this.fileList2.forEach((item) => {
          this.form.file3 += item.fileUrl + ';'
        })
      }
      setEditDaily(this.form)
        .then((res) => {
          setMessageData({
            type: 4,
            leaderid: this.leaderid,
            clerkid: this.userInfo.userId,
          })
          this.pupDocumentShow = false
          let pages = getCurrentPages() //页面栈
          let prePage = pages[pages.length - 2] //上一页
          prePage.$vm.reFresh = Math.random() //触发上一页监听器
          uni.navigateBack() //返回上一页
        })
        .catch(() => {
          uni.showToast({
            title: '服务异常，请稍后重试',
            type: 'default',
            position: 'bottom',
            icon: 'none',
            position: 'center',
            mask: true,
            duration: 3000,
          })
          this.pupDocumentShow = false
        })
    },
    handleForward() {
      this.pupDocumentShow = true
    },
    handleClose() {
      this.show = false
    },
    submitOwnForm() {
      this.form.file1 = ''
      this.form.file2 = ''
      this.form.file3 = ''
       //去掉文本输入最后一个标点符号
        if(this.form.content1){
          this.form.content1 = this.deleteEndPunctuation(this.form.content1)
       }
      if(this.form.content2){
         this.form.content2 =this.deleteEndPunctuation(this.form.content2)
       }
      if(this.form.content3){
          this.form.content3 =this.deleteEndPunctuation(this.form.content3)
       }
      if (this.fileList.length > 0) {
        this.fileList.forEach((item) => {
          this.form.file1 += item.fileUrl + ';'
        })
      }
      if (this.fileList1.length > 0) {
        this.fileList1.forEach((item) => {
          this.form.file2 += item.fileUrl + ';'
        })
      }
      if (this.fileList2.length > 0) {
        this.fileList2.forEach((item) => {
          this.form.file3 += item.fileUrl + ';'
        })
      }
      this.form.status = 0
      setEditDaily(this.form)
        .then((res) => {
          setMessageData({
            type: 2,
            leaderid: this.leaderid,
            clerkid: this.userInfo.userId,
          })
          uni.showToast({
            title: '已处理',
            type: 'default',
            position: 'bottom',
            icon: 'none',
            position: 'center',
            mask: true,
            duration: 3000,
          })
          this.pupOwnShow = false
          let pages = getCurrentPages() //页面栈
          let prePage = pages[pages.length - 2] //上一页
          prePage.$vm.reFresh = Math.random() //触发上一页监听器
          uni.navigateBack() //返回上一页
        })
        .catch(() => {
          uni.showToast({
            title: '服务异常，请稍后重试',
            type: 'default',
            position: 'bottom',
            icon: 'none',
            position: 'center',
            mask: true,
            duration: 3000,
          })
          this.pupOwnShow = false
        })
    },
  },
  components: {
    cmpDialog,
    cmpVideo,
  },
}
</script>

<style lang="scss" scoped>
.my-date {
  display: flex;
  align-items: center;
  position: relative;
  height: 90rpx;
  background: #05163E;
  box-shadow: 0px 3rpx 2rpx 0px hsl(219, 100%, 89%);
  border-radius: 10rpx 10rpx 0px 0px;
  justify-content: space-between;
  .my-date-select {
    text-align: end;
    margin-right: 30rpx;
    width: 50%;
    // color: #c7dbff !important;
  }
}
.edit-box {
  flex: 1;
  margin: 30rpx;
  background: #fff;
  z-index: 2;
  box-sizing: border-box;
  background: #f5f9ff;
  box-shadow: 0px 3rpx 8rpx 0px #b7a5a6;
  border-radius: 10rpx 10rpx 10rpx 10rpx;
  position: relative;
}
.main-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: absolute;
}
.img-container {
  position: fixed;
  width: 100%;
}
.containerBody {
  .content {
    display: flex;
    flex: 1;
    justify-content: space-between;
    position: relative;
  }
  .warning-time {
    height: 100rpx;
    text-align: center;
    font-size: 24rpx;
    font-weight: 400;
    color: #606c81;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  .time {
    font-size: 48rpx;
    font-weight: bold;
    color: #14bfb1;
    margin: 0px 8rpx;
  }
  position: relative;
  flex: 1;
  margin: -60rpx 24rpx 24rpx 24rpx;
  box-sizing: border-box;
  border: 2rpx solid #ddd;
  z-index: 2;
  box-shadow: 0px 6rpx 6rpx 0rpx #c5adae;
  border-radius: 20rpx;
  background: #fff;
}
.bottomImg {
  height: 126rpx;
  border-radius: 10rpx;
  position: absolute;
  bottom: 4rpx;
  width: 100%;
}
.submit-form {
  bottom: 30rpx;
  display: flex;
  width: 100%;
  position: absolute;
}
</style>
